<template>
    <div>
        <div v-for="(item,index) in list" :key="index" style="border-bottom:1px solid #e0e0e0">
            <div class="flex"  >
                <el-switch v-model="item.status" active-color="#13ce66" inactive-color="#ff4949" style="margin-top:10px"></el-switch>
                <div style="line-height:40px;margin-right:5px">启用 {{ item.name}}</div>
                <el-tooltip class="item" effect="dark" :content="data[index].tip" placement="top-start">
                <el-button type="primary" size="mini" style="height:30px;margin-top:5px;margin-left:80px" round @click="click(index)">设置商品</el-button>
                </el-tooltip>
            </div>
            <template v-if="item.status">
            <div class="flex switch_right">
                <div style="line-height:40px;margin-right:5px">主标题</div>
                <el-input v-model="item.title" style="width:100px" placeholder="请输入主标题" />
                <!-- 选择颜色 -->
                <el-color-picker v-model="item.title_color"></el-color-picker>
                
                <template v-if="item.subtitle==undefined&&item.button_color!=undefined">
                <div style="line-height:40px;margin-right:5px">按钮颜色</div>
                <el-color-picker v-model="item.button_color"></el-color-picker>
                </template>
            </div>
            <div class="flex switch_right">
                <template v-if="item.subtitle!=undefined">
                <div style="line-height:40px;margin-right:5px">副标题</div>
                <el-input v-model="item.subtitle" style="width:100px" placeholder="请输入副标题" />
                <!-- 选择颜色 -->
                <el-color-picker v-model="item.subtitle_color"></el-color-picker>
                
                <template v-if="item.button_color!=undefined">
                <div style="line-height:40px;margin-right:5px">按钮颜色</div>
                <el-color-picker v-model="item.button_color"></el-color-picker>
                </template>
                </template>
            </div>
            </template>

        </div>
    </div>
</template>

<script>

    export default {
        props:['list'],
        name: 'SettingOffer',
        data(){
            return{
                data:[
                    {tip:'跳转到秒杀商品页面',url:'seckill',push:3,},
                    {tip:'跳转到拼团商品页面',url:'group_buy',push:3,},
                    {tip:'跳转到商品页面,在商品列表中勾选新品',url:'goods',push:2,},
                    {tip:'跳转到特价商品页面',url:'special_offer',push:3,},
                ]
            }
        },
        methods:{
            click(index){
                this.$store.dispatch('user/set_routers_index', this.data[index].push)
                localStorage.setItem("menuindex", this.data[index].push)
                this.$router.push('/'+this.data[index].url+'/index')
            }
        }
	
    }
</script>

<style >
.flex{
  display: flex;
  flex-wrap: wrap;
}
.switch_right{
    margin-left: 20px;
    margin-bottom: 10px;
}
.switch_right div{
    margin-right: 5px;
}
</style>
